<template>
  <div class="login">
    <div class="left">

      <div style="    position: relative;">
        <img
          src="../assets/xin/xin (4).png"
          style="height: 55.55vh; width: 100%"
          alt=""
          srcset=""
        />
        <div style="width: 25%;
    height: 69px;
    padding: 10px;
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    justify-content: center;
    align-items: center;
    background: rgb(255, 255, 255);">
<img style="width: 80%;
    height: 30px;" src="@/assets/xin/logo.png" alt="">
      </div>
      </div>
      <div
        style="
          flex: 1;
          display: flex;
          padding: 16px 80px;
          justify-content: center;
          background: #323f5a;
         
        "
      >
        <div
          style="
            flex: 1;
            display: flex;
            width: 80%;
            color: #fff;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div
            style="
              font-size: 24px;
              font-weight: 500;
              color: #ffffff;
              margin-bottom: 20px;
            "
          >
            联系我们
          </div>
          <div
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <div style="position: relative;">
              <div style="font-size: 17px; margin-bottom: 5px">
                业务联系电话
              </div>
              <div
            
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">13140161000</span>

              </div>
              <div
                @mouseover="ywshang"
              @mouseout="ywchu"
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (6).png"
                /><span>13140161000</span>
              </div>
              <div v-if="yewu" style="width: 160px;
height: 160px;
background: #FFFFFF;
display: flex;
   position: absolute;
    left: 165px;
    top: 0px;
    z-index: 9999;
    justify-content: center;
    align-items: center;
box-shadow: 0px 8px 20px 1px rgba(0,0,0,0.08);
border-radius: 20px 20px 20px 20px;">
        <img style="width:140px;height:140px" src="@/assets/xin/xin (2).png" alt="" srcset="">
      </div>
            </div>
            <div style="position: relative;">
              <div style="font-size: 17px; margin-bottom: 5px">
                技术联系电话
              </div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">13838271800</span>
              </div>
              <div
                @mouseover="jsshang"
              @mouseout="jschu"
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (6).png"
                /><span>13838271800</span>
                
              </div>
              <div v-if="jishu" style="width: 160px;
height: 160px;
background: #FFFFFF;
display: flex;
    justify-content: center;
    position: absolute;
    left: 165px;
    top: 0px;
    z-index: 9999;
    align-items: center;
box-shadow: 0px 8px 20px 1px rgba(0,0,0,0.08);
border-radius: 20px 20px 20px 20px;">
        <img style="width:140px;height:140px" src="@/assets/xin/xin (3).png" alt="" srcset="">
      </div>
            </div>
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">服务邮箱</div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (12).png"
                /><span style="color: #9a9a9e">yzdsjyjy@126.com</span>
              </div>
            </div>
          </div>
        </div>
                <div
          style="
            flex: 1;
            display: flex;
            width: 80%;
            color: #fff;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div
            style="
              font-size: 24px;
              font-weight: 500;
              color: #ffffff;
              margin-bottom: 20px;
            "
          >
            投诉举报
          </div>
          <div
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">
                违法和不良信息举报
              </div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">0377-62268666</span>
              </div>
            </div>
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">
                投诉侵权及摘抄模仿电话
              </div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (7).png"
                /><span style="color: #9a9a9e">0371-55555404</span>
              </div>
            </div>
            <div>
              <div style="font-size: 17px; margin-bottom: 5px">举报邮箱</div>
              <div
                style="
                  display: flex;
                  justify_content: center;
                  align-items: center;
                  font-size: 17px;
                "
              >
                <img
                  style="width: 28px; height: 28px; margin-right: 7px"
                  src="@/assets/xin/xin (12).png"
                /><span style="color: #9a9a9e">yzdsjyjy@126.com</span>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            width: 80%;
            color: #fff;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div
            style="
              font-size: 24px;
              font-weight: 500;
              color: #ffffff;
              margin-bottom: 20px;
            "
          >
            官方客服
          </div>
          <div
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
      <div style="width: 180px;
height: 180px;
background: #FFFFFF;
display: flex;
    justify-content: center;
    align-items: center;
box-shadow: 0px 8px 20px 1px rgba(0,0,0,0.08);
border-radius: 20px 20px 20px 20px;">
        <img style="width:160px;height:160px" src="@/assets/xin/xin (1).png" alt="" srcset="">
      </div>
          </div>
        </div>

      </div>
    </div>
    <div class="right">
      <div style="width: 65%" class="loginCard">
        <div class="loginTitle">账号注册</div>
        <div class="tab">
          <!-- <div @click="tab(1)">CA登录
                    <span v-if="active==1" class="block"></span>
                </div> -->
          <!-- <div class="title">账号注册
                    <span v-if="active==2" class="block"></span>
                </div> -->
        </div>
        <div class="form" v-if="active == 2">
          <el-form :model="loginFrom" :rules="rules" ref="loginFrom">
            <el-form-item prop="username">
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入账号"
                v-model="loginFrom.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                type="password"
                v-model="loginFrom.password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="passwords">
              <el-input
                prefix-icon="el-icon-lock"
                placeholder="请再次输入密码"
                type="password"
                v-model="loginFrom.passwords"
              ></el-input>
            </el-form-item>
            <el-form-item prop="mobile">
              <el-input
                prefix-icon="el-icon-phone"
                placeholder="手机号"
                v-model="loginFrom.mobile"
              ></el-input>
            </el-form-item>
            <el-form-item prop="yzm">
              <div class="code">
                <el-input
                  prefix-icon="el-icon-coordinate"
                  placeholder="请输入验证码"
                  v-model="loginFrom.yzm"
                ></el-input>
                <div class="codeImg" @click="getcodeimg">
                  <el-button
                    v-if="!cionbutton"
                    style="
                      width: 90%;
                      margin-left: 10px;
                      border-radius: 2px;
                      opacity: 1;
                      height: 38px;
                    "
                    @click="send"
                    type="primary"
                    plain
                    >{{ yanzhneg }}</el-button
                  >
                  <el-button
                    v-else
                    disabled
                    style="
                      width: 90%;
                      margin-left: 10px;
                      border-radius: 2px;
                      opacity: 1;
                      height: 38px;
                      background-color: #a0cfff;
                      opacity: 1;
                    "
                    type="primary"
                    plain
                    >{{ yanzhneg }}</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                prefix-icon="el-icon-s-custom"
                placeholder="推荐人"
                v-model="loginFrom.tuijian_code"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="loginBtnss">
            <el-link type="primary"  @click="$router.push('/login')"
              >去登录</el-link
            >
          </div>
          <div class="loginBtn">
            <!-- <el-checkbox label="记住密码" name="type"></el-checkbox> -->
            <el-button @click="sends">注册账号</el-button>
            <!-- <div @click="$p.url('/forget')">忘记密码</div> -->
          </div>
          
        </div>
        <div class="form" v-if="active == 1">
          <div class="caImg">
            <!-- <img src="../assets/img/password.png" alt=""> -->
          </div>
          <!-- <div class="loginBtn">
                    <el-button type="primary" @click="login">CA登录</el-button>
                </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login, logins } from "@/api/user";
import { personalrealname } from "@/api/personalrealname";
import axios from "axios";
export default {
  data() {
    return {
      active: 2,
      cionbutton: false,
      yanzhneg: "获取验证码",
      times: 120,
      loginFrom: {
        // username:'18838955975',
        // password:'123',
        username: "",
        password: "",
        passwords: "",
        mobile: "",
        yzm: "",
      },
      codeUrl: "",
      rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: "blur",
          },
        ],
        passwords: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: "blur",
          },
        ],
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        mobile: [
          {
            type: "date",
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        yzm: [
          {
            type: "date",
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      captchaOnOff: false,
           jishu:false,
      yewu:false,
    };
  },
  mounted() {
    this.getcodeimg();
  },
  methods: {
        ywshang(){
this.yewu= true;
    },
    ywchu(){
this.yewu= false;
    },
        jsshang(){
this.jishu= true;
    },
    jschu(){
this.jishu= false;
    },
    send() {
      axios({
        url: "http://192.168.0.28:8082/sms/checkPhoneCode",
        // url: "http://192.168.0.28:8082/apply/sms/send",
        method: "get", // params: '必须是一个无格式对象 query参数',
        params: {
          mobile: this.loginFrom.mobile,
          event: "register",
        },
        timeout: 10000,
        // headers: {
        //   token: sessionStorage.getItem("token"),
        // },
      })
        .then((res) => {
          console.log(res.data.msg);
          if (res.data.code == 200) {
            this.cionbutton = true;
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.daojishi();
            // this.$router.push("/BidSecurity/ElectronicProtocol");
          } else {
            this.$message.error(res.data.msg);
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("失败", err);
          // this.$notify.error({
          //   message: err.response.data.msg,
          // });
        });
    },
    
    sends() {
      var cionasd = this.loginFrom;
      axios({
        url: "http://192.168.0.28:8082/systems/applications/register",
        // url: "http://192.168.0.28:8082/apply/index/register",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          ...cionasd,
        },
        // timeout: 10000,
        headers: {
          token: sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.cionbutton = true;
            this.$message({
              message: '注册成功',
              type: "success",
            });
               sessionStorage.setItem("usernames", this.loginFrom.username);
            // this.daojishi();
            // this.$router.push("/BidSecurity/ElectronicProtocol");
          } else {
            this.$message.error(res.data.msg);
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("失败", err);
          // this.$notify.error({
          //   message: err.response.data.msg,
          // });
        });
    },
    daojishi() {
      var that = this;
      if (this.times == 0) {
        clearTimeout(this.yanTimer);
        this.cionbutton = false;
        this.yanzhneg = "获取验证码";
      } else {
        this.times--;
        this.yanzhneg = this.times + "s";
        this.yanTimer = setTimeout(() => {
          that.daojishi();
        }, 1000);
      }
    },
    getcodeimg() {
      // getcode().then(res=>{
      //     this.codeUrl = window.URL.createObjectURL(res)
      // })
    },
    login() {
      login(this.loginFrom).then((res) => {
        sessionStorage.setItem("token", res.data.data.token);
        sessionStorage.setItem("username", res.data.data.username);
        this.$router.push({
          path: "/",
        });
      });
    },
    tab(i) {
      this.active = i;
      personalrealname(this.loginFrom).then((res) => {
        console.log(res);
        // sessionStorage.setItem('token',res.data.data.token)
        // sessionStorage.setItem('user_id',res.data.data.id)
        // this.$router.push({
        //     path:'/'
        // })
      });
    },
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("blobToBase64 error"));
        };
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  background: #5a7aec;
  .left {
   width: 60%;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    height: 100%;
    .leftBanner {
      width: 690px;
      height: 690px;
    }
  }
  .right {
    flex: 1;
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    .loginCard {
      .tab {
        display: flex;
        align-items: center;
        background: #f5f5f5;
        div {
          font-size: 24px;
          width: 100%;
          height: 75px;
          line-height: 75px;
          position: relative;
          cursor: pointer;
          // span{
          //     display: inline-block;
          //     width: 100%;
          //     height: 3px;
          //     background: #1890FF;
          //     position: absolute;
          //     bottom: 0;
          //     left: 0;
          // }
        }
      }
      .title {
        display: flex;
        justify-content: center;
        // margin-top: 10px;
        // margin-left: 150px;
      }
      .form {
        // width: 376px;
        // height: 402px;
        padding: 30px;
        // padding-top: 0px;
        padding-bottom: 20px;
        background: #f5f5f5;
        .caImg {
          width: 200px;
          height: 200px;
          margin: 0 auto;
          margin-top: 5px;
          margin-bottom: 30px;
        }
      }
      .loginTitle {
        display: flex;
        justify-content: center;
        font-size: 36px;
        margin-bottom: 20px;
        // line-height: 90px;
        // margin: 30px;
        // margin-left: 130px;
      }
      .isPassword {
        font-size: 12px;
        display: flex;
        padding-left: 10px;
        margin-bottom: 20px;
        align-items: center;
        justify-content: space-between;
        & > div {
          cursor: pointer;
        }
        & > div:nth-child(1) {
          color: #1890ff;
        }
      }
      .el-form-item__error {
        padding-left: 20px;
      }
      .code {
        display: flex;
        align-items: center;
        .codeImg {
          height: 40px;
        }
      }
      .loginBtn {
        padding-top: 3px;
        display: flex;
        justify-content: center;
        button {
          width: 300px;
          background: #1890ff;
          color: #fff;
        }
      }
      .loginBtnss {
        padding-top: 13px;
        display: flex;
        justify-content: end;
      }
    }
  }
}
</style>